import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import { List, InputItem, WhiteSpace, Button } from 'antd-mobile';
import md5 from 'md5';
import styles from './index.css';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: undefined,
      password: undefined
    };
  }
  handleInput (key, val) {
    this.setState({ [key]: val});
  }
  handleSubmit () {
    const { dispatch } = this.props;
    const { userName, password } = this.state;
    dispatch({
      type: 'user/login',
      payload: {
        userName,
        password: md5(password)
      },
      cb () {
        dispatch(routerRedux.push({ pathname: '/home' }));
      }
    })
  }
  render () {
    const { userName, password } = this.state;
    return (
      <div className={styles.loginPage}>
        <img className={styles.loginAvatar} src={require('../../assets/yay.jpg')} alt="avatar img" />
        <WhiteSpace size="xl" />
        <List className={styles.loginList}>
          <InputItem
            onChange={this.handleInput.bind(this, 'userName')}
            value={userName}
            clear
            error={!userName}
            maxLength={10}
            placeholder="请输入用户名"
          >
            用户名
          </InputItem>
          <InputItem
            onChange={this.handleInput.bind(this, 'password')}
            value={password}
            clear
            error={!password}
            maxLength={6}
            type="password"
            placeholder="请输入密码"
          >
            密码
          </InputItem>
        </List>
        <WhiteSpace size="xl" />
        <Button
          className={styles.loginButton}
          type="primary"
          onClick={this.handleSubmit.bind(this)}
          size="small"
        >
          登录
        </Button>
        <WhiteSpace size="xl" />
        <div className={styles.loginLink}>
          <Link to="/register">未注册，前往注册</Link>
        </div>
        
      </div>
    )
  }
}
export default connect()(Login);
